<template>
  <div class="app-container customer-div">
    <!--数据列表-->
    <div class="table-container">
      <el-table
        v-loading="listLoading"
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        style="width: 100%; margin-top: 20px">

        <el-table-column  label="类别" min-width="100" align="center" prop="ptName">
        </el-table-column>

        <el-table-column
          label="牌号"
          align="center"
          min-width="200">
          <template slot-scope="{row}">
            {{row.goodsList.brandName}}/{{row.goodsList.goodsSn}}
          </template>
        </el-table-column>

        <el-table-column
          label="最近更新时间"
          align="center"
          min-width="150">
          <template slot-scope="{row}">
            {{row.goodsList.priceTime}}
          </template>
        </el-table-column>

        <el-table-column
          label="当前价格"
          align="center"
          min-width="150">
          <template slot-scope="{row}">
            {{row.goodsList.goodsPrice}}
          </template>
        </el-table-column>

        <el-table-column
          min-width="200"
          fixed="right"
          label="操作"
          align="center">
          <template slot-scope="{row}">
            <el-button type="text" size="mini" @click="updatePrice(row)">更新价格</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,20]"
        :total="count">
      </el-pagination>
    </div>

    <!-- 延期审核-->
    <el-dialog title="更新价格" :visible.sync="dialogVisible" width="380px">
      <el-form label-width="100px" size="small" :model="sendForm" ref="sendForm" :rules="rules">
        <el-form-item label="当前类别:">
          {{ ptName }}
        </el-form-item>
        <el-form-item label="当前牌号:" >
          {{ goodsSn }}
        </el-form-item>
        <el-form-item label="填写最新价格:" prop="goodsPrice">
          <el-input v-model="sendForm.goodsPrice" clearable style="width: 120px;"></el-input>
          <span>元/吨</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确认更新</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { getCategoryPriceListAPI,editCategoryPriceAPI } from '@/api/allInLine/moresuPrice.js';
import store from '@/store';
import { mapGetters } from 'vuex';
const defaultListQuery={
  pageNum: 1,
  pageSize: 10,
};
const defaultForm={
  pmId: '',
  goodsPrice:'',
};
export default {
  name: "priceService",
  data() {
    const validatePrice = (rule, value, callback) => {
      if (value < 0) {
        callback(new Error('价格不能小于0元'))
      }
      callback()
    };
    return {
      spanArr: [],// 需要合并的行数
      pos:0,// 索引
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      tableData: [],
      count: 0,
      listLoading: false,
      roles:store.getters.roles ? store.getters.roles : [],

      dialogVisible: false,
      btnLoading:false,
      ptName:'',
      goodsSn:'',
      sendForm: JSON.parse(JSON.stringify(defaultForm)),
      rules: {
        goodsPrice: [
          { required: true, message: '请填写最新价格', trigger: 'blur' },
          { validator:validatePrice,trigger: 'blur'}
        ],
      },
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  created() {
  },
  filters: {
    // fifApply(val){
    //   if(val == 0){
    //       return '待提交'
    //   }else if(val == 10){
    //      return '未审核'
    //   }else if(val == 20){
    //     return '审核未通过'
    //   }
    // },
  },
  components : {
  },
  methods: {
    handleConfirm() {
      let data=JSON.parse(JSON.stringify(this.sendForm))
      this.$refs.sendForm.validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          editCategoryPriceAPI(data).then((res) => {
            this.btnLoading = false;
            this.dialogVisible = false;
            this.$message.success("提交成功");
            this.getList()
          }).catch(() => {
            this.btnLoading = false;
          })
        }
      })
    },
    // 更新价格
    updatePrice(item) {
      this.dialogVisible = true;
      this.sendForm.pmId = item.goodsList.pmId;
      this.sendForm.goodsPrice = item.goodsList.goodsPrice?item.goodsList.goodsPrice:'';
      this.ptName = item.ptName;
      this.goodsSn = item.goodsList.brandName + item.goodsList.goodsSn;
    },
    // 合并行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 ) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    getSpanArr(data) {
      this.spanArr = [];
      this.pos = 0;
      for (let i = 0; i < data.length; i++){
        if (i == 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          if (data[i].ptId == data[i - 1].ptId) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos=i
          }
          // console.log(this.spanArr,'this.spanArr=======');
          // console.log(this.pos,'this.pos=======');
        }
      }
    },
    handleSizeChange(val){
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val){
      this.listQuery.pageNum = val;
      this.getList();
    },

    handleSearchList(){
      this.listQuery.pageNum = 1;
      this.getList();
    },

    //获取列表
    getList() {
      this.listLoading = true;
      getCategoryPriceListAPI(this.listQuery).then(response => {
        this.tableData = response.list;
        this.count = response.count;
        this.listLoading = false;
        this.getSpanArr(this.tableData)
      }).catch(()=>{
        this.listLoading = false;
      });
    },

  },
}
</script>



